<script is:inline>
/** @param {Event} event */
const handleSubmit = async (event) => {
  event.preventDefault()

  // @ts-ignore
  const email = event.target.email.value
  const payload = {
    email,
    audienceId: "fce6d558-d118-4071-ae77-6b8b141550bd",
  }

  try {
    const response = await fetch(
      "https://uorqzpuryrgfnecadajo.supabase.co/functions/v1/email-signup",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(payload),
      },
    )

    if (response.ok) {
      console.log("Form submitted successfully")
      const thanks =
        `<h3 class="font-supermolot text-lg font-bold uppercase !m-0 !p-0">Thanks for signing up!</h3>`
      const div = document.querySelector("div[data-signup-form=\"\"]")
      if (!div) {
        return
      }

      console.info(div)
      div.innerHTML = thanks
    } else {
      console.error("Failed to submit form", await response.text())
    }
  } catch (error) {
    console.error("An error occurred", error)
  }
}

// Add the event listener to the form on client load
document.addEventListener("DOMContentLoaded", () => {
  const form = document.querySelector("form")
  if (form) {
    form.addEventListener("submit", handleSubmit)
  }
})
</script>

<div
  class="size-full flex flex-col items-center justify-center space-y-4"
  data-signup-form
>
  <h3 class="font-supermolot text-lg font-bold uppercase !m-0 !p-0">
    Follow the latest developments
  </h3>
  <form class="flex flex-col gap-4 items-center">
    <!-- <label for="email">Email: </label> -->
    <input
      type="email"
      id="emailInput"
      name="email"
      placeholder="vitalik@researcher.com"
      autocomplete="off"
      required
      autocorrect="off"
      autocapitalize="off"
      class="pointer-events-auto min-w-72 bg-black flex items-center justify-center text-white border px-6 py-2 font-semibold font-mono text-md md:text-lg focus:ring-0 focus:ring-offset-0"
    />

    <button class="hover:text-accent-400 w-full pointer-events-auto bg-black flex items-center justify-center text-white border px-6 py-2 font-semibold font-mono text-md md:text-lg focus:ring-0 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50">
      Submit
    </button>
  </form>
</div>
